<#include "/public/macro.html">
<script src="/js/audioplayer.min.js"></script>
<link rel="stylesheet" href="/css/audioplayer.css">

<div class="uk-layui-form">
<div class="layui-collapse">
	<form class="layui-form" action="/apps/contacts/quality/add/save.html" method="post" data-toggle="ajax-form" data-inner="#callOutNamesHis">
		<input type="hidden" name="id" value="${contactsid!''}">
		<input type="hidden" name="ckind" value="${ckind!''}">
		<input type="hidden" name="itemid" value="${itemid!''}">
		<input type="hidden" name="qualitystatus" value="${qualitystatus!''}">
		<input type="hidden" name="eventids" value="${statusEventIds!''}">
		
		<div class="layui-tab">
		  <ul class="layui-tab-title">
		    <li class="layui-this">录音信息</li>
		    <li>营销记录（${callOutNamesHisList.totalElements!'0'}）</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
		    <#if statusEventList??>
		    <#assign inx = 1>
		    <#list statusEventList as statusEvent>
		      	<div class="layui-colla-item">
					<h2 class="layui-colla-title">（${inx}）录音信息
						<#if statusEvent?? && statusEvent.record>
								<#if !statusEvent.distype?? && !statusEvent.distype == '' && statusEvent.createtime??>
									${statusEvent.createtime?string("yyyy-MM-dd HH:mm:ss")}
								<#else>
									<#if statusEvent.recordfile?length gt 50>
										${statusEvent.recordfile[0..50]}
									<#else>
										${statusEvent.recordfile!''}
									</#if>
								</#if>
							<#else>
							无录音
							</#if>
					</h2>
					<div class="layui-colla-content layui-show">
						<table class="layui-table" lay-skin="line">
							<tbody>
								<tr class="tdHasContorllor design-dropable-td">
									<td align="right">
										主叫号码：
									</td>
									<td>
										<#if statusEvent?? && statusEvent.discaller??>
											${statusEvent.discaller!''}
										</#if>
									</td>
									<td align="right">
										拨打时间：
									</td>
									<td>
										<#if statusEvent?? && statusEvent.starttime??>
											${statusEvent.starttime?string("yyyy-MM-dd HH:mm:ss")}								
										</#if>
									</td>
									<td align="right">
										振铃时长：
									</td>
									<td>
										<#if statusEvent?? && statusEvent.ringduration??>
											<#assign ringsectime = statusEvent.ringduration/1000>
											${(ringsectime/3600)?floor?string('00')}:${(ringsectime%3600/60)?floor?string('00')}:${(ringsectime%60)?floor?string('00')}
										</#if>
									</td>
								</tr>
								<tr class="tdHasContorllor design-dropable-td">
									<td align="right">
										接听时间：
									</td>
									<td>
										<#if statusEvent?? && statusEvent.answertime??>${statusEvent.answertime?string("yyyy-MM-dd HH:mm:ss")}</#if>
									</td>
									<td align="right">
										通话时长：
									</td>
									<td>
										<#if statusEvent?? && statusEvent.duration??>
											<#assign duration = statusEvent.duration/1000>
											${(duration/3600)?floor?string('00')}:${(duration%3600/60)?floor?string('00')}:${(duration%60)?floor?string('00')}
										</#if>
									</td>
									<td align="right">
										来电归属：
									</td>
									<td>
										<#if statusEvent??>
											${statusEvent.province!''}/${statusEvent.city!''}/${statusEvent.isp!''}
										</#if>
									</td>
								</tr>
							</tbody>
						</table>
						<div class="layui-form-item">
								<div class="layui-inline" style="width:100%;">
									<div class="layui-input-inline" style="width:100%;">
										<audio preload="auto" controls>
											<source src="/apps/resource/voice/${statusEvent.id!''}.wav">
										</audio>
									</div>
								</div>
							</div>
							录音下载：<#if statusEvent?? && statusEvent.createtime??><a  href="/apps/resource/voice/${statusEvent.id!''}.wav" target="_blank">${statusEvent.createtime?string("yyyy-MM-dd HH:mm:ss")}</a></#if>
					</div>
				</div>
					<#assign inx = inx + 1>
				</#list>
			</#if>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">质检信息</h2>
				<div class="layui-colla-content layui-show">
					<div class="layui-form-item">
					<label class="layui-form-label">联系人状态：</label>
					<div class="layui-input-inline" >
						<input type="hidden" id="parentid" name="salestatus" value="<#if currsaleStatus??>${currsaleStatus.id}<#else>0</#if>">
						<input type="text" name="parentname" id="parentname" required value="<#if currsaleStatus??>${currsaleStatus.name}<#elseif area??>${area.name!''}<#else>分类总揽</#if>" style="width: 220px;" lay-verify="required" autocomplete="off" readOnly="readonly" onClick="showMenu();"
							class="layui-input">
						<i class="layui-icon" style="position: absolute;right: -23px;top: 6px;font-size: 25px;${systemConfig.color!'color:#0096C4;'}" onClick="showMenu()">&#xe631;</i>
						<div id="menuContent" style="display:none; position: absolute;z-index:10000;width: 218px;height: 190px;" class="ukefu-ztree">
							<ul id="saleStatusTypeTree" class="ztree" style="width:208px;height: 180px;"></ul>
						</div>
					</div>
					
					<label class="layui-form-label">质检结果：</label>
					<div class="layui-input-inline" >
						<select name="qualityresult">
							<option value="pass" >通过</option>
							<option value="faild" >未通过</option>
						</select>
					</div>
					</div>
					<div class="layui-form-item" id="apmemo">
						<div class="layui-inline">
							<label class="layui-form-label">联系人说明：</label>
							<div class="layui-input-inline" style="width:580px;">
								<textarea name="memo" placeholder="预约说明" class="layui-textarea" style="resize:none;">${contacts.salesmemo!''}</textarea>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-button">
				<div class="layui-button-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		    </div>
		    
		    
		    <div class="layui-tab-item">
		    	<div id="calloutnameshis_id">
		    		<#include "/apps/business/contacts/calloutnamelist.html">
				</div>
				<div class="row" shtyle="padding:5px;">
					<div class="col-lg-12" id="page" style="text-align:center;"></div>
				</div>
		    </div>
		  </div>
		</div>
		<div class="layui-form-button">
			<div class="layui-button-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	</div>
</div>

<script>
	$(function(){
		
		if($("input[name='reservation']:checked").val() == '0'){
			$("#apt").css("display","none") ;
			/* $("#apmemo").css("display","none") ; */
		}
	});
	layui.use('form', function() {
		var form = layui.form;
		form.render(); //更新全部
		form.verify({
			optime: function(value){
				var res =  $('input:radio[name="reservation"]:checked').val();
			    if(res == '1' && new Date(value).getTime() < new Date().getTime()){
			      return '预约时间不可小于当前时间';
			    }else{
			    	layer.closeAll();
			    }
		 	 }
		});
		form.on("radio(aptyes)",function(data){
			$("#apt").show();
			$(".apstatus").show() ;
		});
		form.on("radio(aptno)",function(data){
			$("#apt").hide();
			$(".apstatus").hide() ;
		});
	});
	layui.use('element', function(){
		var element = layui.element;
		element.init();
	});
	$( 'audio' ).audioPlayer();
	layui.use('laydate', function() {
		var laydate = layui.laydate;

		laydate.render({ 
		  elem: '#optime' ,
		  format: 'yyyy-MM-dd HH:mm:ss',
		  type:'datetime'
		});
	});
</script>
<SCRIPT type="text/javascript">
	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: onClick,
			beforeClick: beforeClick
		}
	};
	
	function beforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("saleStatusTypeTree")
		nodes = zTree.getSelectedNodes();
		var allow = true , lastnode ;
		for (var i=0, l=nodes.length; i<l; i++) {
			lastnode = nodes[i].type ;
			if(nodes[i].organ && (nodes.length >= 1 && (event.ctrlKey || event.shiftKey))){
				allow = false ; break ;
			}
		}
		if(lastnode != treeNode.type && (event.ctrlKey || event.shiftKey)){
			allow = false ;
		}
		
		if (allow == false) {
			top.layer.alert("组织机构不能点选多个上级机构，也不能同时选择地区和机构", {icon: 3});
			return false;
		} else {
			return true;
			
		}
	}
	
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("saleStatusTypeTree"),
		nodes = zTree.getSelectedNodes(),
		v = "" , value = "";
		nodes.sort(function compare(a,b){return a.id-b.id;});
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].name + ",";
			if(value != ""){
				value = value + "," ;
			}
			value = nodes[i].id ;
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		if(treeNode.type == "saleStatus"){
			$("#parentname").attr("value", v);
			$("#parentid").attr("value", value);
		}
		if (!event.ctrlKey && !event.shiftKey && treeNode.type == "saleStatus") {
			hideMenu() ;
		}
		/* loadURL("/apps/contacts/reservation/salestatuslist.html?id="+treeNode.id,"#salestatus"); */
	}


	var zNodes =[
	    { id:'0', pId:'00', name:"分类总揽", open:true , saleStatusTypeParent : true, type : "saleStatusTypeParent"}
	    <#if saleStatusTypeList??>
	    <#list saleStatusTypeList as saleStatus>
	    <#if saleStatus.activityid?? && statusCode?? &&  saleStatus.activityid == statusCode>
	    ,{ id:'${saleStatus.id!''}', pId:'${saleStatus.parentid!'0'}', name:"${saleStatus.name!''}", open:false }
	    </#if>
	    </#list>
	    </#if>
	    <#if saleStatusList?? >
	    <#list saleStatusList as saleStatus>
	    ,{ id:'${saleStatus.id!''}', pId:'${saleStatus.cate!'0'}', name:"${saleStatus.name!''}" ,  icon:"/images/dept.png", type : "saleStatus", saleStatus : true}
	    </#list>
	    </#if>
	];
	$(document).ready(function(){
		var ztree = $.fn.zTree.init($("#saleStatusTypeTree"), setting, zNodes);
		<#if currsaleStatus??>
		var node = ztree.getNodeByParam('id', '${currsaleStatus.id!''}');//获取id为1的点
		ztree.selectNode(node);//选择点  
		</#if>
		/* <#if area??>
		var node = ztree.getNodeByParam('id', '${area.id!''}');//获取id为1的点
		ztree.selectNode(node);//选择点  
		</#if> */
	});
	function showMenu() {
		$("#menuContent").css({left:"0px", top:"38px"}).show();

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").hide();
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
	
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  laypage.render({
				elem: 'page'
				,pages: <#if callOutNamesHisList??>${callOutNamesHisList.totalPages}<#else>0</#if> //总页数
				,curr:<#if callOutNamesHisList??>${callOutNamesHisList.number+1}<#else>0</#if>
				,groups: 5 //连续显示分页数
				,jump:function(data , first){
					if(!first){
						loadURL("/apps/contacts/quality/calloutnamelist.html?contactsid=${contactsid!''}&itemid=${itemid!''}&ckind=${ckind!''}&statusCode=${statuscode!''}&qualitystatus=${qualitystatus!''}&p="+data.curr,"#calloutnameshis_id");
					}
				}
		   });
		});
</SCRIPT>